.kaitify-colors-panel {
  display: block;
  width: 100%;
  padding: @small-padding;

  .kaitify-colors-header {
    display: block;
    width: 100%;
    padding-bottom: @small-padding;
    margin-bottom: @margin;
    border-bottom: 1px solid @border-color;

    .kaitify-colors-header-text {
      margin-left: 10px;
    }
  }

  .kaitify-colors-content {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;

    .kaitify-colors-el {
      padding: 2px;
      border: 1px solid transparent;
      border-radius: 1px;

      &.kaitify-color-el-active {
        border-color: @theme;
      }

      & > div {
        display: block;
        width: 16px;
        height: 16px;
        border: 1px solid @border-color;
        border-radius: 1px;
        transition: all 300ms;

        &:hover {
          cursor: pointer;
          transform: scale(1.2);
        }
      }
    }
  }

  &.kaitify-dark {
    .kaitify-colors-header {
      border-bottom-color: @border-color-dark;
    }

    .kaitify-colors-content {
      .kaitify-colors-el {
        & > div {
          border-color: @border-color-dark;
        }
      }
    }
  }
}
